import { Table, message, Popconfirm, Space, Modal, Row, Col, Form, Input, Checkbox, Tooltip, Image as AntdImage } from "antd";
import { useModel, Outlet, useLocation, history } from "umi";
import { Card as SemiCard, ButtonGroup, Button } from "@douyinfe/semi-ui";
import { IconRefresh, IconPlusCircle, IconDelete, IconEdit, IconEyeOpened, IconTick } from "@douyinfe/semi-icons";
import { useReactive } from "ahooks";
import { useEffect, useState } from "react";
import { InputNumber } from "@douyinfe/semi-ui";

const SendoutGoodPage = () => {
    const { onCloseGlobalModal } = useModel("global.modal");
    const [selectedMerchant, setSelectedMerchant] = useState(null);
    const [form] = Form.useForm();
    const { imageBase64 } = useModel("global");

    const loadData = () => {};

    const state = useReactive({
        dataLoading: false,
    });
    useEffect(() => {
        loadData();
    }, []);

    const onFinish = async (record) => {
        console.log(111);
    };

    return (
        <div>
            <Form form={form} layout="horizontal" onFinish={onFinish} labelCol={{ span: 5 }} wrapperCol={{ span: 19 }}>
                <Form.Item label="物流单号" name="ccName" validateTrigger="onBlur" rules={[{ required: true }]}>
                    <Input placeholder="请输入品类名称" />
                </Form.Item>
                <Form.Item label="物流公司" name="ccName" validateTrigger="onBlur" rules={[{ required: true }]}>
                    <Input placeholder="请输入品类名称" />
                </Form.Item>
                <Table bordered={false} size="small" dataSource={[1]} rowKey="ciUuid" pagination={false} style={{ marginTop: 1 }}>
                    <Table.Column title="序号" align="center" width={60} render={(_, r, i) => i + 1} />
                    <Table.Column
                        title="商品图片"
                        dataIndex="ciPict"
                        key="ciName"
                        align="left"
                        width={80}
                        render={(_, r) => <AntdImage preview width={60} height={60} src={imageBase64} fallback={imageBase64} />}
                    />
                    <Table.Column title="商品全称" dataIndex="ciName" key="ciName" align="left" render={(_, r) => r.info?.ciName || ""} />
                    <Table.Column title="商品数量" dataIndex="ciQuat" key="ciQuat" align="center" render={(_) => (_ ? numberFormat(_, 2) : 0)} />
                    <Table.Column title="已发货数量" dataIndex="ciQuat" key="ciQuat" align="center" render={(_) => (_ ? numberFormat(_, 2) : 0)} />
                    <Table.Column title="未发货数量" dataIndex="ciQuat" key="ciQuat" align="center" render={(_) => (_ ? numberFormat(_, 2) : 0)} />
                    <Table.Column
                        title="本次发货数量"
                        dataIndex="ciQuat"
                        key="ciQuat"
                        align="center"
                        render={(_, r, index) => <InputNumber defaultValue={r.ciQuat} onChange={() => console.log(1)} />}
                    />
                </Table>

                <div style={{ marginTop: 20, textAlign: "center" }}>
                    <Space>
                        <Button loading={state.submitLoading} type="primary" htmlType="submit" style={{ width: "100%" }}>
                            提交
                        </Button>
                        <Button loading={state.submitLoading} onClick={onCloseGlobalModal}>
                            取消
                        </Button>
                    </Space>
                </div>
            </Form>
        </div>
    );
};

export default SendoutGoodPage;
